@import "@/styles/variables";

.root {
  position: relative;
  display: inline-block;

  :global {
    .react-datepicker {
      z-index: 1;
      font-family: Roboto, sans-serif;
      border: 1px solid #eeeeef;
      border-radius: 6px;

      display: flex;
    }

    .react-datepicker__header {
      background-color: #fff;
      border: 0;
      padding: 12px 0 0;
    }

    .react-datepicker__current-month {
      margin-bottom: 10px;

      line-height: 1;
      font-weight: 700;
      font-size: 14px;
      text-transform: capitalize;
    }

    .react-datepicker__navigation-icon {
      width: 0;
    }

    .react-datepicker__navigation-icon::before {
      border-width: 2px 2px 0 0;
      top: 7px;
    }

    .react-datepicker__navigation {
      // outline: 1px solid red;
      width: 24px;
      height: 24px;
      top: 6px;

      &-icon {
        // top: 2px;

        // &--previous {
        //   right: 1px;
        // }

        // &--next {
        //   left: 1px;
        // }
      }

      // &--previous {
      //   left: 16px;
      // }

      // &--next {
      //   right: 16px;
      // }
    }

    .react-datepicker__day {
      outline: 0;
      color: #a9abad;
    }

    .react-datepicker__day--in-range,
    .react-datepicker__day--in-selecting-range {
      border-radius: 50%;
      background: #f6f9ff;

      &,
      &:hover {
        color: $color-primary;
      }
    }

    .react-datepicker__day--keyboard-selected,
    .react-datepicker__month-text--keyboard-selected,
    .react-datepicker__quarter-text--keyboard-selected,
    .react-datepicker__year-text--keyboard-selected {
      border-radius: 50%;
      background: $color-primary;

      &,
      &:hover {
        color: #fff;
      }
    }

    .react-datepicker__day--range-start,
    .react-datepicker__day--range-end,
    .react-datepicker__day--selected {
      border-radius: 50%;
      background: $color-primary;
      font-weight: 400;

      &,
      &:hover {
        color: #fff;
      }
    }

    // .react-datepicker-popper[data-placement^='bottom']
    //   .react-datepicker__triangle {
    //   &::before {
    //     border-bottom-color: rgba(9, 30, 66, 0.1);
    //   }

    //   &::after {
    //     border-bottom-color: #fff;
    //   }
    // }

    .react-datepicker__month {
      margin: 0;
    }

    .react-datepicker__day-names {
      margin: 3px 0 0;
      line-height: 1;
      border-top: 1px solid #eeeeef;
      border-bottom: 1px solid #eeeeef;
    }

    .react-datepicker__day-name {
      opacity: 0.5;
      text-transform: capitalize;
      text-align: center;
      font-weight: 700;
      font-size: 14px;
      line-height: 35px;

      height: 35px;
      width: 38px;
      margin: 0;

      color: $color-black;
    }

    // Time
    .react-datepicker__header--time {
      padding: 12px 0 9px;
      border-bottom: 1px solid #eeeeef;
    }

    .react-datepicker__time-container {
      width: 88px;
      border-left: 1px solid #eeeeef;
    }

    .react-datepicker__time {
      .react-datepicker__time-box {
        width: 88px;
      }

      .react-datepicker__time-box ul.react-datepicker__time-list {
        box-sizing: border-box;
      }

      .react-datepicker__time-box
        ul.react-datepicker__time-list
        li.react-datepicker__time-list-item {
        display: flex;
        align-items: center;
        justify-content: center;

        height: 36px;
        padding: 0;

        font-size: 14px;
        color: #a9abad;

        &:hover {
          background: rgba(233, 241, 255, 0.38);
        }

        &--selected {
          background: rgba(233, 241, 255, 0.38);
          color: $color-primary;
          font-weight: 400;
        }
      }
    }
  }
}

.field {
  background: #f2f3f5;
  border-radius: 6px;

  font-weight: 500;
  font-size: 16px;
  color: $color-black;

  padding: 8px 12px;
}

.root_icon {
  > svg {
    z-index: 1;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: $color-black;
  }

  .field {
    padding-left: 40px;
  }
}

.root_only_time {
  :global {
    .react-datepicker {
      padding-top: 16px;
    }

    .react-datepicker__month-container,
    .react-datepicker__navigation {
      display: none;
    }
  }
}

.day {
  margin: 0;
  width: 38px;
  height: 38px;

  line-height: 38px;
  font-size: 14px;
  color: #a9abad;

  &,
  &:hover {
    border-radius: 50%;
    color: $color-black;
  }

  &_past {
    color: #a9abad;
  }
}

.remove {
  z-index: 1;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);

  color: var(--clr-black);

  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    width: 22px;
    height: 22px;
  }
}
